@model int
<style type="text/css">
	.sqDxzmr-02 {
		width: auto;
		margin: 0 10px;
		background-color: transparent;
		border-radius: 0px;
		box-shadow: none;
		padding: 10px 0;
	}

	.sqDxzmr-02 .sq-dxzmr-input-group {
		background-color: #FFF;
		border-radius: 5px;
		box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.08);
		padding: 10px 0;
		margin-bottom: 10px;
	}

	.sqDxzmr-02 .sq-dxzmr-input-group .mui-input-row {
		/*border: 1px solid #e6e6e6;*/
		border: none;
		margin: 0 0px 10px;
		display: flex;
		flex: 1;
		justify-content: flex-start;
		flex-flow: row nowrap;
		height: auto;
		align-items: flex-start;
		align-content: center;
		font-size: 14px;
	}

	.sqDxzmr-02 .sq-dxzmr-input-group .mui-input-row input[type='text'],
	.sqDxzmr-02 .sq-dxzmr-input-group .mui-input-row textarea,
	.sqDxzmr-02 .sq-dxzmr-input-group .mui-input-row input[type='file'] {
		border: 1px solid #e6e6e6;
		border-radius: 5px;
		width: 80%;
		padding-left: 10px;
		margin-right: 10px;
		font-size: 14px;
	}

	.sqDxzmr-02 .sq-dxzmr-input-group .mui-input-row label {
		width: 30%;
		width: auto;
		padding-right: 15px;
		white-space: nowrap;
	}

	.upFile {
		/*border: 1px solid #e6e6e6;*/
		border-radius: 5px;
		margin-right: 10px;
	}

	.hidimg {
		position: absolute;
		width: 100%;
		height: 200px;
		opacity: 0;
		-ms-filter: 'alpha(opacity=0)';
		z-index: 9;
	}
</style>

<div class="bg-gray">

	<header class="mui-bar mui-bar-nav head-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href='@Url.Action("Index")'></a>
		<h1 class="mui-title">当前为（@(Model+1)）号标记点</h1>
	</header>

	<div class="mui-content bg-gray">
		<div class="sq-dxzmr sqDxzmr-02">

			<div class="mui-input-group qj-input-group" style="padding-top:10px;">
				<div class="mui-input-row" style="height: auto;">
					<label>定位照片：</label>
					<input type="hidden" value="" name="imgs" class="j-imgs">
					<div class="yyzz mui-pull-right mui-text-left j-moimgs">
						<div class="up-img j-imgkuang">
							<input type="file" class="j-img hidimg" accept="image/*" multiple="multiple" />
						</div>
					</div>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label>数据照片：</label>
					<input type="hidden" value="" name="dataimgs" class="j-dataimgs">
					<div class="yyzz mui-pull-right mui-text-left j-datamoimgs">
						<div class="up-img j-dataimgkuang">
							<input type="file" class="j-dataimg hidimg" accept="image/*" multiple="multiple" />
						</div>

					</div>
				</div>
			</div>
			<div class="mui-input-group sq-dxzmr-input-group">
				<div class="mui-input-row">
					<label>名称：</label>
					<input type="text" class="j-name" placeholder="请输入点名称">
				</div>
				<div class="mui-input-row">
					<label>描述：</label>
					<!--<input type="text" class="mui-input-clear" placeholder="请输入简介">-->
					<textarea name="" rows="4" cols="4" class="j-miaoshi" placeholder="请输入描述"></textarea>
				</div>
			</div>
			<input type="hidden" class="j-imgcount" value="0" />
			<br />
		</div>
		<button class="mui-btn mui-btn-block mui-btn-green res-btn">提交</button>
		<br />

	</div>
</div>

@section Scripts{

<script>
	layui.use(['form', 'upload'], function() {

		var upload = layui.upload;

		let isupover = false;
		layui.use(['form', 'upload'], function() {
			var upload = layui.upload;
			//普通图片上传
			var uploadInst = upload.render({
				elem: '.j-img',
				url: '@Url.Action("UploadFilesAjax","Login")',
    multiple: true,
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {


						$(".j-moimgs").prepend("<img style='width:150px;height:200px;' class='j-num' src='" + result + "'>");

						if ($(".j-num").length >= 3) {
							$(".j-imgkuang").hide();
						}
					});
				},
				done: function(res) {

					let imgs = $('.j-imgs').val();
					if (imgs === "") {
						$('.j-imgs').val(res.data.src);
					} else {
						$('.j-imgs').val(imgs + "," + res.data.src);
					}
					$(".j-imgcount").val($(".j-imgcount").val() - 0 + 1);
					//上传成功
				},
				error: function() {
					//信息框
					layerm.open({
						content: '上传失败，请联系我们或者稍后重试',
						btn: '好的'
					});
				}
			});

			//普通图片上传
			var uploadss = upload.render({
				elem: '.j-dataimg',
				url: '@Url.Action("UploadFilesAjax","Login")',
     multiple: true,
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$(".j-datamoimgs").prepend("<img style='width:150px;height:200px;' class='j-datanum' src='" + result +
							"'>");
						if ($(".j-datanum").length >= 2) {
							$(".j-dataimgkuang").hide();
						}
					});
				},
				done: function(res) {

					let imgs = $('.j-dataimgs').val();
					if (imgs === "") {
						$('.j-dataimgs').val(res.data.src);
					} else {
						$('.j-dataimgs').val(imgs + "," + res.data.src);
					}
					$(".j-imgcount").val($(".j-imgcount").val() - 0 + 1);
					//上传成功
				},
				error: function() {
					//信息框
					layerm.open({
						content: '上传失败，请联系我们或者稍后重试',
						btn: '好的'
					});
				}
			});



		});
	});

	$(".res-btn").click(function() {
		if ($(".j-name").val().length == 0) {
			//提示
			layerm.open({
				content: '请输入点名称',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if ($(".j-num").length + $(".j-datanum").length > $(".j-imgcount").val() - 0) {
			layerm.open({
				content: '图片正在上传，请稍后再试',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
    if ($(".j-imgs").length == 0) {
            layerm.open({
                content: '请上传图片',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
     if ($(".j-dataimgs").length == 0) {
            layerm.open({
                content: '请上传图片',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }

		var postdata = {
			title: $(".j-name").val(),
			miaoshu: $(".j-miaoshi").val(),
			img: $(".j-imgs").val(),
			dataimg: $(".j-dataimgs").val(),
			address: '@ViewContext.HttpContext.Request.Query["address"]',
			detail: '@ViewContext.HttpContext.Request.Query["detail"]',
			lng: '@ViewContext.HttpContext.Request.Query["lng"]',
			lat: '@ViewContext.HttpContext.Request.Query["lat"]',
			productId: '@ViewContext.HttpContext.Request.Query["id"]'
		}

		$.ajax({
			type: "post",
			data: postdata,
			url: '@Url.Action("AddProduct")',
			success: function(result) {
				if (result.state == 1) {
					layerm.open({
						content: '添加成功',
						btn: '好的',
						yes: function() {
							location.href = '/Map/Maps?id=@ViewContext.HttpContext.Request.Query["id"]';
						}
					});
				} else {
					layerm.open({
						content: result.msg,
						btn: '好的',
						yes: function() {
							location.href = "/Map/Index";
						}
					});
				}
			}
		})


	})
</script>
}
